import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common';
import { OrderBaseInfoComponent } from './base-info/itemframe';
import { OrderPaymentComponent } from './payment/itemframe';
import { OrderLogisticsComponent } from './logistics/itemframe';
import { OrderInvoiceComponent } from './invoice/itemframe';
import { OrderAccountComponent } from './account/itemframe';
import { dataObj } from './data/classDada';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import OrderDetailsService from './_common/service';
const scale = GLOBAL.SCALE;

export class OrderDetailsPage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '订单详情',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		let { orderId, tabIndex } = this.props.navigation.state.params || {}
		console.log('总框架', this.props.navigation.state.params)
		this.state = {
			tabIndex: tabIndex || 0
		}
		this.orderFlag = {  // 标示 字段
			orderId,
		}
		this.tabData = [];
	}

	async	componentWillMount() {
		this._init();
	}

	componentWillUnmount() {

	}

	//初始调用
	_init = () => {
		this._getData();
	}

	//_ 初始数据
	_getData = async () => {
		if (!this.orderFlag.orderId) return
		this.orderData = await OrderDetailsService.baseIndoDetail(this.orderFlag.orderId);
		console.log('总页面订单中心', this.orderData)
		if (this.orderData) {
			this.orderFlag.tCode = this._getTCode();
			this.orderFlag.orderType = this.orderData.orderType;
			this.tabData = dataObj.tabData[this.orderData.orderType];
			OrderDetailsService.initAPI(this.orderFlag.orderType);
			this.setState({ ls: true })
		}
	}

	//获取tCode
	_getTCode = () => {
		let { isAgency, bizMode, periodType, isFuture, longOrderId, isQhXhXsBiz } = this.orderData || {};
		let tCode = 'S';//现货
		if (isAgency == 1) { tCode = 'A' };//代理
		if (bizMode == 1) { tCode = 'C' };//闭口
		if (periodType == 'L') { tCode = 'L' };//长约框架
		if (isFuture == 1) { tCode = 'F' };//远期
		if (longOrderId) { tCode = 'E' };//执行
		if (isQhXhXsBiz === 'Y') { tCode = 'QH' };//泉化销售单
		return tCode;
	}

	// tab切换
	_tabFn = tabIndex => { this.setState({ tabIndex }) }


	render() {
		let { tabIndex } = this.state;
		let { choice } = this.props.navigation.state.params || {};
		console.log('this.tabData', this.tabData)
		return (
			<View style={styles.container}>
				<View style={styles.headBox}>
					<View style={styles.tabBox}>
						{
							this.tabData && this.tabData.map((item, index) => {
								return (
									<TouchableOpacity key={index} style={[styles.tabTextBox, tabIndex == index ? styles.tabTextBoxActive : null]} onPress={() => { this._tabFn(index) }}>
										<Text style={styles.tabText}>{item.title}</Text>
									</TouchableOpacity>
								)
							})
						}
					</View>
				</View>
				<View style={styles.iframe}>
					{tabIndex == 0 && this.orderData ? <OrderBaseInfoComponent orderData={this.orderData} data={this.orderFlag || {}} choice={choice} /> : null}
					{tabIndex == 1 && this.orderData ? <OrderPaymentComponent orderData={this.orderData} data={this.orderFlag || {}} /> : null}
					{tabIndex == 2 && this.orderData ? <OrderLogisticsComponent orderData={this.orderData} data={this.orderFlag || {}} /> : null}
					{tabIndex == 3 && this.orderData ? <OrderInvoiceComponent orderData={this.orderData} data={this.orderFlag || {}} /> : null}
					{tabIndex == 4 && this.orderData ? <OrderAccountComponent orderData={this.orderData} data={this.orderFlag || {}} /> : null}
					{!this.orderData ? <PageStatusIndex status={'loading'} /> : null}
				</View>
			</View >
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray
	},
	headBox: {
		width: '100%',
		backgroundColor: style.color.themeColor,
	},
	tabBox: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		paddingBottom: 90 * scale
	},
	tabText: {
		color: '#fff',
		fontSize: 14 * scale,
		lineHeight: 30 * scale
	},
	tabTextBox: {
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale,
	},
	tabTextBoxActive: {
		borderBottomWidth: 2 * scale,
		borderStyle: 'solid',
		borderBottomColor: style.color.white,
	},
	iframe: {
		flex: 1
	}
})